import { extendClass } from '../../utils/index'
import { DIRECTION_LEFT, DIRECTION_RIGHT, SPCIES_TYPE } from '../../constant/index'
import store from '../../store/index'
import Animation from '../base/animation'
import { getCloudUrl } from '../../utils'


const BULLET_IMG_SRC = getCloudUrl('images/jb.png')
const BULLET_WIDTH = 60
const BULLET_HEIGHT = 60
const REMOVE_TIME_WIDTH = 200 * 1.5
const REMOVE_TIME_HEIGHT = 200 * 1.5
/**
 * 偏移量
 */
const OFFSET_VELOCITY = 10
/**
 * 金币类型枚举
 */
export const GOLD_TYPE = {
  one: 1,
  two: 2,
  three: 3,
  focus: 4
}
export default class Spcies extends Animation {
  constructor() {
    super(BULLET_IMG_SRC, BULLET_WIDTH, BULLET_HEIGHT)
  }

  init(x, y, speed) {
    this.x = x
    this.y = y

    this.speed = speed
    /**
     * 是否可见
     */
    this.visible = true
    /**
     * 是否未挂在绳子上
     */
    this.isFall = false
    /**
     * 是否暂停下落
     */
    this.suspend = false
    /**
     * 下落时的角度
     */
    this.fallAngle = 0
    /**
     * 下落时的方向
     */
    this.direction = ''
    this.money = this.createdMoney()
    /**
     * 偏移速度
     */
    this.migrationVelocity = 3
    /**
     * 类型
     */
    this.img.src = SPCIES_TYPE[this.type].src
    this.interval = 125
    this.initExplosionAnimation()
    extendClass(this)
  }
  /**
   * 设置爆炸尺寸
   */
  setRemoveBgSize() {
    this.width = REMOVE_TIME_WIDTH
    this.height = REMOVE_TIME_HEIGHT
    this.x = this.x - (REMOVE_TIME_WIDTH - BULLET_WIDTH) / 2
    this.y = this.y - (REMOVE_TIME_HEIGHT - BULLET_HEIGHT) / 2
  }
  /**
   * 创建金额
   */
  createdMoney() {
    // const list = Object.values(GOLD_TYPE)
    // const index = Math.floor(Math.random() * list.length)
    // return list[index] || GOLD_TYPE.one
    return 1
  }
  // 销毁金币
  destroy(list = store.golds, index = -1) {
    if (index !== -1) {
      list.splice(index, 1)
    } else {
      list.splice(list.indexOf(this), 1)
    }
    store.haveGolds.push(this)
    this.removeMoveGold()
  }
    /**
   * 从运动数组中移除当前组件
   */
  removeMoveGold() {
    store.moveGolds.splice(store.moveGolds.indexOf(this), 1)
  }
  /**
   * 更新方向
   */
  updateCollideWithWallDirection () {
    if (this.isCollideWithWallLeft()) {
      this.setDirection(DIRECTION_RIGHT)
    }
    if (this.isCollideWithWallRight()) {
      this.setDirection(DIRECTION_LEFT)
    }
  }
  /**
   * 位置偏移
   */
  positionOffset () {
    this.migrationVelocity = Math.abs(OFFSET_VELOCITY * (Math.abs(this.rotate) / 100) + Math.abs(this.rotate / 20))
    this.speed += this.migrationVelocity / 100

    if (this.direction === DIRECTION_RIGHT) {
      this.setX(this.x + this.migrationVelocity)
    }

    if (this.direction === DIRECTION_LEFT) {
      this.setX(this.x - this.migrationVelocity)
    }
  }
  // 每一帧更新金币位置
  update() {
    if (!this.suspend && this.isFall) {

      this.positionOffset()
      /**
       * 下落时重力加速度
       */
      this.setY(this.y + this.speed)
      this.setSpeed(this.speed + this.speed / 60)
    }
  }
  /**
   * 预定义爆炸的帧动画
   */
  initExplosionAnimation() {
    const frames = []

    const EXPLO_FRAME_COUNT = 11

    for (let i = 0; i < EXPLO_FRAME_COUNT; i++) {
      frames.push(getCloudUrl(`images/${i + 1}-removebg-preview.png`))
    }

    this.initFrames(frames)
  }
  End () {
    this.setSuspend(true)
    this.playAnimation()
    this.setRemoveBgSize()
  }
  /**
   * 将精灵图绘制在canvas上
  */
  render(ctx) {
    if (!ctx) return

    ctx.drawImage(
      this.img,
      this.x,
      this.y,
      this.width,
      this.height
    )
  }
  

}
